<template>
	<SeamlessScroll class="es-center-bottom">
		<div v-for="(item, index) in actions.slice(0, 5)" class="es-bottom-item">
			<ElIcon size="32" :color="item.color">
				<component :is="iconObj[item.icon]" />
			</ElIcon>
			<div class="es-item-text" style="color: {{item.color}}">
				{{ item.value }}
			</div>
		</div>
	</SeamlessScroll>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElIcon } from "element-plus";
import {
	KnifeFork,
	IceTea,
	Coffee,
	IceCream,
	Dessert,
	GobletFull,
} from "@element-plus/icons-vue";
import SeamlessScroll from "#/views/screen/modules/SeamlessScroll.vue";

const iconObj = { KnifeFork, IceTea, Coffee, IceCream, Dessert, GobletFull };
const actions = ref([
	{ color: "rgb(24, 144, 255)", icon: "KnifeFork", value: "表面滑坡" },
	{ color: "rgb(255, 192, 105)", icon: "IceTea", value: "内部滑坡" },
	{ color: "rgb(92, 219, 211)", icon: "Coffee", value: "隧坡滑坡" },
	{ color: "rgb(179, 127, 235)", icon: "IceCream", value: "陡坡滑坡" },
	{ color: "rgb(255, 133, 192)", icon: "Dessert", value: "沉陷性滑坡" },
]);

onMounted(() => {
	// 如果需要初始化值，可以在这里处理，但现在值已经被直接定义了
});
</script>

<style lang="scss" scoped>
.es-center-bottom {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 150px;
	.es-bottom-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 170px;
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--es-block-bg);
		font-size: 22px;
		font-weight: 600;
		.es-item-text {
			margin-top: 16px;
		}
	}
}
</style>
